<template>
  <div class="_404-view">
    <div class="_404-cont">
      <img class="_404-img" src="@/assets/_404-img.png" alt="404" />
      <h4 class="_404-tit">Error !</h4>
      <p class="_404-text">It seems that the page you are looking for cannot be found.</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'the404View'
}
</script>

<style scoped>
._404-view {
  height: calc(100vh - 270px);
  text-align: center;
  line-height: 1;
  background: #eee;
}
._404-cont{
  padding: 120px 0;
}
._404-img {
  max-width: 440px;
}
._404-tit {
  color: #150d0d;
  font-size: 32px;
  margin: 35px auto 0;
}
._404-text {
  color: #444;
  font-size: 16px;
  margin: 26px auto 0;
}
.s-link {
  display: inline-block;
  margin: 15px 0 0;
}
@media screen and (max-width: 768px) {
  ._404-img {
    width:60%;
    max-width: 60%;
  }
  ._404-tit {
    font-size: 18px;
    margin: 18px auto 0;
  }
  ._404-text {
    font-size: 14px;
    margin: 12px auto 0;
  }
  ._404-cont{
    padding:60px 0;
  }
}
</style>
